<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div @click="send">发送消息</div>
    <input type="text" v-model="msg" />
  </div>
</template>
<script>
import { WebSocketUtil } from "@/utils/WebSocketUtils";
export default {
  name: "about",
  data() {
    return {
      url: "ws://" + window.location.host + "/api/myWsHandle",
      webSocketUtil: null,
      msg: "",
    };
  },
  created() {
    this.webSocketUtil = new WebSocketUtil(this.url, true);
    this.webSocketUtil.openFn = this.wsopen;
    this.webSocketUtil.messageFn = this.wsmessage;
    this.webSocketUtil.layerFn = () => {
      this.$message.error("重连失败");
    };
  },
  methods: {
    wsopen() {
      console.log("连接成功");
    },
    wsmessage(event) {
      const data = JSON.parse(event.data);
      console.log("接收信息");
      console.log(data);
    },
    send() {
      const param = {
        flag: "event",
        data: this.msg,
      };
      this.webSocketUtil.send(JSON.stringify(param));
    },
  },
};
</script>
